<template>
  <div class="index">
    <common-title-bar :mode="'white'" :isShowMoreOption="true" :always="isAlways"></common-title-bar>
    <div class="rule_and_record">
      <div class="rule" @click="openRuleAndRecord(0)">规则</div>
      <div class="record" @click="openRuleAndRecord(1)">记录</div>
    </div>
    <transition>
      <div class="wrap" v-show="isSignIn == 0 || (isSignIn == 1 && userList.length == 0) || isSignIn == 3">
        <div class="sign-in-wrap">
          <div class="logo"></div>
          <h1>步数竞赛</h1>
          <p class="activity-rule">收集步数决定排名，排名越高，奖励越丰富</p>
          <div class="countDown" v-if="start_time > 0">
            <count-down :time="start_time" @finish="countDownFinished">
              <template #default="timeData">
                <span class="icon"></span>
                <span class="colon">距下一期开始还剩：</span>
                <span class="block">{{timeData.days > 9 ? timeData.days : '0' + timeData.days}}</span>
                <span class="block">天</span>
                <span class="block">{{timeData.hours > 9 ? timeData.hours : '0' + timeData.hours}}</span>
                <span class="colon">:</span>
                <span class="block">{{timeData.minutes > 9 ? timeData.minutes : '0' + timeData.minutes}}</span>
                <span class="colon">:</span>
                <span class="block">{{timeData.seconds > 9 ? timeData.seconds : '0' + timeData.seconds}}</span>
              </template>
            </count-down>
          </div>
          <div class="runBtn" v-if="isSignIn == 0" @click="rankRace">免费报名参加</div>
          <div class="runBtn" v-else-if="isSignIn == 3" @click="rankRace">继续报名下一期</div>
          <div class="runBtn" style="filter: grayscale(1); color: #fff" v-else>已报名</div>
        </div>
      </div>
    </transition>
    <transition>
      <div class="wrap" v-show="(isSignIn == 1 || isSignIn == 2) && userList.length ">
        <div class="step-competition-wrap">
          <div class="logo"></div>
          <div class="step-competition-title">步数竞赛</div>
          <p class="step-competition-desc">收集步数决定排名，排名越高，奖励越丰富</p>
          <div class="countDown">
            <count-down v-if="isSignIn == 1 && end_time > 0" :time="end_time" @finish="countDownFinished">
              <template #default="timeData">
                <span class="icon"></span>
                <span class="desc">距结束还剩：</span>
                <span class="block">{{timeData.days > 9 ? timeData.days : '0' + timeData.days}}</span>
                <span class="colon">天</span>
                <span class="block">{{timeData.hours > 9 ? timeData.hours : '0' + timeData.hours}}</span>
                <span class="colon">:</span>
                <span class="block">{{timeData.minutes > 9 ? timeData.minutes : '0' + timeData.minutes}}</span>
                <span class="colon">:</span>
                <span class="block">{{timeData.seconds > 9 ? timeData.seconds : '0' + timeData.seconds}}</span>
              </template>
            </count-down>
            <p v-else>本期已结束</p>
          </div>
          <div class="step-competition-users">
            <div class="user" v-for="n in userList" :key="n.id">
              <p class="num">{{n.rank}}</p>
              <div class="user-photo-wrap" :class="{'run_1': n.rank == 1, 'run_2': n.rank == 2, 'run_3': n.rank == 3,}">
                <div class="user-photo">
                  <img :src="photoHttp2Https(n.head)" alt="">
                </div>
              </div>
              <div class="user-info">
                <p class="user-name ellipsis">{{n.nick}}</p>
                <p class="user-yanzhi ellipsis">可获得{{n.points || 0}}颜值</p>
              </div>
              <div class="user-steps">
                <p>已收集：{{n.steps || 0}}步</p>
              </div>
            </div>
            <p class="runBtn" v-if="isSignIn == 1" @click="goBack">去收集步数提升排名</p>
            <p class="runBtn" v-else-if="isSignIn == 2" @click="() => {isShowRank = true}">立即领取奖励</p>
          </div>
        </div>
      </div>
    </transition>
    <overlay :show="isShowRuleAndRecord" :lock-scroll="false" z-index="11">
      <rule-and-record :isShow="isShowRuleAndRecord" :active="active" @closeAlert="closeAlert"></rule-and-record>
    </overlay>
    <overlay :show="isShowRank">
      <div class="alertSuccess-wrap">
        <span class="iconfont iconclose" @click="isShowRank = false"></span>
        <h2>最终排名</h2>
        <div class="alertSuccess">
          <div class="rank">
            <p>第{{rank}}名</p>
          </div>
          <p class="rankText">恭喜获得{{points}}颜值</p>
          <div class="confirm-btn" @click="addGameSteps">确定</div>
        </div>
      </div>
    </overlay>
  </div>
</template>

<script>
import CommonTitleBar from '@/components/CommonTitleBar'
import RuleAndRecord from '@/components/ruleAndRecord/RuleAndRecord'
import { mapState } from 'vuex'
import { CountDown, Toast, Overlay } from 'vant'
import {getRaceIndex, rankRace, addGameSteps} from '@/api/request'
export default {
  data() {
    return {
      isSignIn: -1,
      isShowRuleAndRecord: false,
      active: 0,
      userList: [],
      start_time: '',
      end_time: '',
      points: 0,
      rank: 0,
      isShowRank: false
    };
  },
  components: {
    CountDown, RuleAndRecord, Toast, CommonTitleBar, Overlay
  },
  mounted () {
    this.getRaceIndex()
  },
  computed: {
    ...mapState({
      maskIsShow: "maskIsShow",
      isAlways: "isAlways"
    })
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    webViewFunc (funcName, callback) {
      window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.registerHandler(funcName, callback)
    },
    goBack () {
      window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('goBack')
    },
    countDownFinished () {
      this.getRaceIndex()
    },
    closeAlert() {
      this.active = 0
      this.isShowRuleAndRecord = false
    },
    openRuleAndRecord (i) {
      this.active = i
      this.isShowRuleAndRecord = true
    },
    getRaceIndex () {
      getRaceIndex({}).then(res => {
        console.log(res)
        this.isSignIn = res.is_enroll
        this.userList = res.list
        this.start_time = res.start_time * 1000
        this.end_time = res.end_time * 1000
        this.points = res.points
        this.rank = res.user_rand
      }).catch(e => {
        console.log(e)
        if (e == '18009') {
          this.getRaceIndex()
        } else {
          Toast.fail({
            message: e.msg || e.message,
            duration: 3000
          })
        }
      })
    },
    rankRace () {
      this.dataCollect('TE_CONTEST_CLICK', '运动赚颜值', {
        ITEM_ID: 1,
        ITEM_NAME: '报名'
      })
      rankRace({}).then(res => {
        console.log(res)
        Toast.success({message: res.msg, onClose: () => {
          this.getRaceIndex()
        }});
      }).catch(e => {
        console.log(e)
        if (e == '18009') {
          this.rankRace()
        } else {
          Toast.fail({
            message: e.msg || e.message,
            duration: 3000
          })
        }
      })
    },
    raceList () {
      raceList({}).then(res => {
        console.log(res)
        this.rule = res.rule
        this.recordList = res.list
      }).catch(e => {
        console.log(e)
        if (e == '18009') {
          this.raceList()
        } else {
          Toast.fail({
            message: e.msg || e.message,
            duration: 3000
          })
        }
      })
    },
    addGameSteps () {
      this.dataCollect('TE_CONTEST_CLICK', '运动赚颜值', {
        ITEM_ID: 2,
        ITEM_NAME: '领取颜值'
      })
      addGameSteps({
        type: 3, // 类型1：开宝箱赚颜值2：新人额外奖励3：步数竞赛
        points: this.points
      }).then(res => {
        console.log(res)
        Toast.success({message: res.msg, onClose: () => {
          this.isShowRank = false
          this.getRaceIndex()
        }});
      }).catch(e => {
        if (e == '18009') {
          this.addGameSteps()
        } else {
          Toast.fail({
            message: e.msg || e.message,
            duration: 3000
          })
        }
      })
    },
  }
};
</script>

<style lang="less" scoped>
  /deep/ .common-title .title, /deep/ .common-title .back svg{
    fill: #fff;
    color: #fff;
  }
.index {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  // min-height: calc(100vh - constant(safe-area-inset-top));
  // min-height: calc(100vh - env(safe-area-inset-top));
  background: #77d4fe;
  background-image: url(../../assets/images/run_activity_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;

  .rule_and_record{
    position: absolute;
    right: 0;
    top: 0.8rem;
    top: calc(0.8rem + constant(safe-area-inset-top));
    top: calc(0.8rem + env(safe-area-inset-top));

    >div{
      height: 0.42rem;
      font-size: 0.26rem;
      color: #fff;
      text-align: center;
      line-height: 0.42rem;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 0.21rem 0 0 0.21rem;
      padding: 0 0.22rem;
      margin-bottom: 0.2rem;
    }
  }
  .wrap{
    padding-top: calc(44px + 0.4rem);
    padding-top: calc(44px + 0.4rem + constant(safe-area-inset-top));
    padding-top: calc(44px + 0.4rem + env(safe-area-inset-top));
    .sign-in-wrap{
      .logo{
        margin: 1.1rem auto 0.53rem;
        width: 2.21rem;
        height: 2.21rem;
        background: url(../../assets/images/run_activity_logo.png) no-repeat;
        background-size: contain;
      }
      >h1{
        font-size: 0.88rem;
        color: #fff;
        line-height: 1.4rem;
        text-align: center;
        font-weight: bold;
      }
      .activity-rule{
        font-size: 0.3rem;
        color: #fff;
        line-height: 0.6rem;
        text-align: center;
        font-weight: 500;
      }
      .countDown{
        width: 4.92rem;
        height: 0.77rem;
        background-image: url(../../assets/images/run_activity_icon.png), url(../../assets/images/run_activity_time_bg.png);
        background-size: 0.28rem 0.29rem, 100%;
        background-repeat: no-repeat;
        background-position: 0.42rem 0.24rem, left center;
        margin: 0.79rem auto 0;
        padding-left: 0.84rem;
        font-weight: bold;

        /deep/ .van-count-down{
          height: 0.77rem;
          display: flex;
          align-items: center;
        }
        .block{
          padding: 4px;
          font-size: 0.26rem;
          color: #FF9900;
        }
        .colon{
          font-size: 0.26rem;
          color: #2CA9C8;
        }
      }
      .runBtn{
        width: 6.43rem;
        height: 0.97rem;
        margin: 0.9rem auto 0;
        background: url(../../assets/images/run_activity_btn.png) no-repeat;
        background-size: contain;
        font-size: 0.36rem;
        color: #8B410A;
        text-align: center;
        line-height: 0.97rem;
        font-weight: bold;
      }
    }
    
    .step-competition-wrap{
      position: relative;
      margin: 0.88rem auto 0.6rem;
      width: 7rem;
      border: 0.05rem solid #FFE32B;
      background: #fff;
      border-radius: 0.4rem;
      .logo{
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, -50%);
        width: 1.48rem;
        height: 1.48rem;
        background: url(../../assets/images/run_activity_logo.png) no-repeat;
        background-size: contain;
      }
      .step-competition-title{
        width: 4.94rem;
        font-size: 0.42rem;
        color: #2CA9C8;
        font-weight: 500;
        text-align: center;
        margin: 0.92rem auto 0.1rem;
        background-image: url(../../assets/images/run_activity_title_bar_left.png), url(../../assets/images/run_activity_title_bar_right.png);
        background-size: 1.39rem 0.29rem;
        background-repeat: no-repeat;
        background-position: left center, right center;
      }
      .step-competition-desc{
        color: #8CC4D3;
        font-size: 0.26rem;
        text-align: center;
      }
      .countDown{
        width: 4.07rem;
        height: 0.52rem;
        border-radius: 0.26rem;
        margin: 0.14rem auto 0.4rem;
        background: #E7F4F8;
        font-size: 0.26rem;
        >p{
          text-align: center;
          line-height: 0.52rem;
          color: #383838;
        }
        /deep/ .van-count-down{
          display: flex;
          align-items: center;
          justify-content: center;
          height: 0.52rem;
        }
        .desc{
          color: #383838;
        }
        .block, .colon{
          color: #FF9900;
        }
        .block{
          width: 0.4rem;
          text-align: center;
        }
      }
      .step-competition-users{
        padding: 0 0.4rem 0.2rem;

        .user{
          display: flex;
          align-items: center;
          font-size: 0.26rem;
          height: 1.4rem;
          border-bottom: 0.02rem solid #C1ECFF;

          .num{
            color: #4DA49B;
            width: 0.34rem;
          }
          .user-photo-wrap{
            width: 0.99rem;
            height: 1.08rem;
            position: relative;
            margin-right: 0.25rem;
            margin-top: -0.16rem;

            .user-photo{
              position: absolute;
              right: 0.03rem;
              bottom: 0.03rem;
              width: 0.8rem;
              height: 0.8rem;
              border-radius: 0.4rem;
              overflow: hidden;

              img{
                width: 100%;
                height: 100%;
              }
            }
          }
          .run_1{
            background: url(../../assets/images/run_1.png) no-repeat;
            background-size: contain;
          }
          .run_2{
            background: url(../../assets/images/run_2.png) no-repeat;
            background-size: contain;
          }
          .run_3{
            background: url(../../assets/images/run_3.png) no-repeat;
            background-size: contain;
          }
          .user-info{
            width: 2.4rem;
            margin-right: 0.06rem;
            .user-name{
              color: #000;
            }
            .user-yanzhi{
              color: #63BCD2;
            }
          }
          .user-steps{
            flex: 1;
            height: 0.52rem;
            border-radius: 0.26rem;
            background: #FFF7DE;

            p{
              font-size: 0.24rem;
              color: #FF9900;
              font-weight: bold;
              text-align: center;
              line-height: 0.52rem;
            }
          }
        }
        .user:last-of-type{
          border: 0;
        }
        .runBtn{
          width: 6.43rem;
          height: 0.97rem;
          margin: 0.2rem auto 0.5rem;
          background: url(../../assets/images/run_activity_btn.png) no-repeat;
          background-size: contain;
          font-size: 0.36rem;
          color: #8B410A;
          text-align: center;
          line-height: 0.97rem;
          font-weight: 400;
        }
      }
    }
  }
  .alertSuccess-wrap{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5.87rem;
    height: 7.55rem;
    background: url(../../assets/images/alertBg.png) no-repeat;
    background-size: contain;
    .iconclose{
      position: absolute;
      top: -0.95rem;
      right: 0.1rem;
      font-size: 0.54rem;
      color: #fff;
    }
    >h2{
      font-size: 0.4rem;
      color: #fff;
      text-align: center;
      margin-top: 0.3rem;
    }
    .alertSuccess{
      width: 5.45rem;
      height: 6.23rem;
      background: #fff;
      border-radius: 0.2rem;
      margin: 0.23rem auto 0;
      overflow: hidden;

      .rank{
        position: relative;
        width: 5rem;
        height: 5rem;
        background: url(../../assets/images/alertSuccess.png) no-repeat;
        background-size: contain;
        margin: -0.69rem auto 0;

        >p{
          position: absolute;
          top: 3.48rem;
          left: 0;
          right: 0;
          margin: auto;
          font-size: 0.34rem;
          color: #fff;
          text-align: center;
        }
      }
      .rankText{
        font-size: 0.36rem;
        color: #000;
        text-align: center;
        margin-top: -0.25rem;
      }
      .confirm-btn{
        width: 4.5rem;
        height: 0.86rem;
        border-radius: 0.43rem;
        background: linear-gradient(180deg, #FFED3C 0%, #FFB91C 100%);
        margin: 0.4rem auto 0;
        font-size: 0.36rem;
        color: #8B410A;
        text-align: center;
        line-height: 0.86rem;
        font-weight: bold;
      }
    }
  }
}
</style>